<!--
 * @Author: 尹艳婷
 * @Date: 2022-05-30
 * @Description: 大卡片-默认布局
 * @FilePath: \code\ctp-static-portal-front\src\components\Magnet\components\card-default.vue
-->
<template>
  <div
    :id="swiperId"
    class="swiper-container"
    :style="{
      width: contentWidth + 'px'
    }"
  >
    <div
      class="swiper-wrapper clear_fix"
      :style="{
        width: contentWidth * sliderNum.length + 'px',
        marginLeft: sliderNum.length > 1 ? '130px' : ''
      }"
    >
      <div
        class="swiper-slide big-card-slide"
        :style="{
          width: contentWidth + 'px'
        }"
        v-for="(slideItem, slideIndex) in sliderNum"
        :key="slideIndex"
      >
        <!-- 多彩部分 -->
        <div class="big-card-top clear_fix">
          <!-- 大磁贴 -->
          <div
            class="first-card item-card"
            @click="doSomething(magnet[0 + NUM * slideItem])"
            :style="{
              backgroundColor: magnet[0 + NUM * slideItem].bgColor
                ? magnet[0 + NUM * slideItem].bgColor
                : magnetStyle.iconBackGroundColor,
              borderRadius: magnetStyle.borderRadius == 0 ? 0 : magnetStyle.borderRadius + 'px'
            }"
          >
            <div class="card-detail">
              <div class="magnet-icon">
                <img
                  :src="magnet[0 + NUM * slideItem].imageLayouts[0].imageUrl"
                  :style="{
                    width: 'inherit',
                    height: 'inherit'
                  }"
                  alt=""
                  srcset=""
                  v-if="isImg(magnet[0 + NUM * slideItem])"
                />
                <i
                  v-else
                  class="vportal"
                  :class="
                    magnet[0 + NUM * slideItem].imageLayouts[0].imageUrl &&
                    magnet[0 + NUM * slideItem].imageLayouts[0].imageUrl.includes('vp-')
                      ? magnet[0 + NUM * slideItem].imageLayouts[0].imageUrl
                      : `vp-${magnet[0 + NUM * slideItem].imageLayouts[0].imageUrl
                          .replace(/\..*$/, '')
                          .replace(/^.*\_/, '')}`
                  "
                  :style="{ color: magnet[0 + NUM * slideItem].iconColor }"
                ></i>
              </div>
              <div class="magnet-name" :class="`align_${magnetStyle.textAlign}`">
                <span
                  :class="doubleFontEllipsis"
                  :style="{ color: magnet[0 + NUM * slideItem].fontColor }"
                  >{{ magnet[0 + NUM * slideItem].displayName }}</span
                >
              </div>
            </div>
          </div>
          <!-- 第二个部分 -->
          <div class="box2 clear_fix" v-if="magnet.length - NUM * slideItem >= 2">
            <div
              class="second-card item-card"
              @click="doSomething(magnet[item + NUM * slideItem])"
              :style="{
                backgroundColor: magnet[item + NUM * slideItem].bgColor
                  ? magnet[item + NUM * slideItem].bgColor
                  : magnetStyle.iconBackGroundColor,
                borderRadius: magnetStyle.borderRadius == 0 ? 0 : magnetStyle.borderRadius + 'px',
                width: contentWidth * 0.19 + 'px'
              }"
              v-for="(item, index) in magnet.length - NUM * slideItem >= 3 ? [1, 2] : [1]"
              :key="index"
            >
              <div class="card-detail">
                <div class="magnet-icon">
                  <img
                    :src="magnet[item + NUM * slideItem].imageLayouts[0].imageUrl"
                    :style="{
                      width: 'inherit',
                      height: 'inherit'
                    }"
                    alt=""
                    srcset=""
                    v-if="isImg(magnet[item + NUM * slideItem])"
                  />
                  <i
                    v-else
                    class="vportal"
                    :class="
                      magnet[item + NUM * slideItem].imageLayouts[0].imageUrl &&
                      magnet[item + NUM * slideItem].imageLayouts[0].imageUrl.includes('vp-')
                        ? magnet[item + NUM * slideItem].imageLayouts[0].imageUrl
                        : `vp-${magnet[item + NUM * slideItem].imageLayouts[0].imageUrl
                            .replace(/\..*$/, '')
                            .replace(/^.*\_/, '')}`
                    "
                    :style="{
                      color: magnet[item + NUM * slideItem].iconColor
                    }"
                  ></i>
                </div>
                <div class="magnet-name" :class="`align_${magnetStyle.textAlign}`">
                  <span
                    :class="doubleFontEllipsis"
                    :style="{
                      color: magnet[item + NUM * slideItem].fontColor
                    }"
                    >{{ magnet[item + NUM * slideItem].displayName }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- 第三个部分 -->
          <div class="box3 clear_fix" v-if="magnet.length - NUM * slideItem >= 4">
            <!-- 第二大磁贴 -->
            <div class="box4 clear_fix">
              <div
                class="second-card item-card"
                @click="doSomething(magnet[item + NUM * slideItem])"
                :style="{
                  backgroundColor: magnet[item + NUM * slideItem].bgColor
                    ? magnet[item + NUM * slideItem].bgColor
                    : magnetStyle.iconBackGroundColor,
                  borderRadius: magnetStyle.borderRadius == 0 ? 0 : magnetStyle.borderRadius + 'px',
                  width: contentWidth * 0.19 + 'px'
                }"
                v-for="(item, index) in magnet.length - NUM * slideItem >= 5 ? [3, 4] : [3]"
                :key="index"
              >
                <div class="card-detail">
                  <div class="magnet-icon">
                    <img
                      :src="magnet[item + NUM * slideItem].imageLayouts[0].imageUrl"
                      :style="{
                        width: 'inherit',
                        height: 'inherit'
                      }"
                      alt=""
                      srcset=""
                      v-if="isImg(magnet[item + NUM * slideItem])"
                    />
                    <i
                      v-else
                      class="vportal"
                      :class="
                        magnet[item + NUM * slideItem].imageLayouts[0].imageUrl &&
                        magnet[item + NUM * slideItem].imageLayouts[0].imageUrl.includes('vp-')
                          ? magnet[item + NUM * slideItem].imageLayouts[0].imageUrl
                          : `vp-${magnet[item + NUM * slideItem].imageLayouts[0].imageUrl
                              .replace(/\..*$/, '')
                              .replace(/^.*\_/, '')}`
                      "
                      :style="{
                        color: magnet[item + NUM * slideItem].iconColor
                      }"
                    ></i>
                  </div>
                  <div class="magnet-name" :class="`align_${magnetStyle.textAlign}`">
                    <span
                      :class="doubleFontEllipsis"
                      :style="{
                        color: magnet[item + NUM * slideItem].fontColor
                      }"
                      >{{ magnet[item + NUM * slideItem].displayName }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- 第三大磁贴 -->
            <div class="box5 clear_fix" v-if="magnet.length - NUM * slideItem >= 6">
              <div
                class="third-card item-card"
                @click="doSomething(magnet[item + NUM * slideItem])"
                :style="{
                  backgroundColor: magnet[item + NUM * slideItem].bgColor
                    ? magnet[item + NUM * slideItem].bgColor
                    : magnetStyle.iconBackGroundColor,
                  borderRadius: magnetStyle.borderRadius == 0 ? 0 : magnetStyle.borderRadius + 'px',
                  width: contentWidth * 0.12 + 'px'
                }"
                v-for="(item, index) in magnet.length - NUM * slideItem == 6
                  ? [5]
                  : magnet.length - NUM * slideItem >= 8
                  ? [5, 6, 7]
                  : [5, 6]"
                :key="index"
              >
                <div class="card-detail">
                  <div class="magnet-icon">
                    <img
                      :src="magnet[item + NUM * slideItem].imageLayouts[0].imageUrl"
                      :style="{
                        width: 'inherit',
                        height: 'inherit'
                      }"
                      alt=""
                      srcset=""
                      v-if="isImg(magnet[item + NUM * slideItem])"
                    />
                    <i
                      v-else
                      class="vportal"
                      :class="
                        magnet[item + NUM * slideItem].imageLayouts[0].imageUrl &&
                        magnet[item + NUM * slideItem].imageLayouts[0].imageUrl.includes('vp-')
                          ? magnet[item + NUM * slideItem].imageLayouts[0].imageUrl
                          : `vp-${magnet[item + NUM * slideItem].imageLayouts[0].imageUrl
                              .replace(/\..*$/, '')
                              .replace(/^.*\_/, '')}`
                      "
                      :style="{
                        color: magnet[item + NUM * slideItem].iconColor
                      }"
                    ></i>
                  </div>
                  <div class="magnet-name" :class="`align_${magnetStyle.textAlign}`">
                    <span
                      :class="doubleFontEllipsis"
                      :style="{
                        color: magnet[item + NUM * slideItem].fontColor
                      }"
                      >{{ magnet[item + NUM * slideItem].displayName }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 固定背景色部分 -->
        <div class="big-card-bot clear_fix" v-if="magnet.length - NUM * slideItem >= 9">
          <div
            class="forth-card item-card"
            @click="doSomething(magnet[item + NUM * slideItem])"
            :style="{
              width: index >= 3 ? contentWidth * 0.19 + 'px' : contentWidth * 0.12 + 'px',
              borderRadius: magnetStyle.borderRadius == 0 ? 0 : magnetStyle.borderRadius + 'px'
            }"
            v-for="(item, index) in magnet.length - NUM * slideItem == 9
              ? [8]
              : magnet.length - NUM * slideItem == 10
              ? [8, 9]
              : magnet.length - NUM * slideItem == 11
              ? [8, 9, 10]
              : magnet.length - NUM * slideItem >= 13
              ? [8, 9, 10, 11, 12]
              : [8, 9, 10, 11]"
            :key="index"
          >
            <div class="card-detail">
              <div class="magnet-icon">
                <img
                  :src="magnet[item + NUM * slideItem].imageLayouts[0].imageUrl"
                  :style="{
                    width: 'inherit',
                    height: 'inherit'
                  }"
                  alt=""
                  srcset=""
                  v-if="isImg(magnet[item + NUM * slideItem])"
                />
                <i
                  v-else
                  class="vportal"
                  :class="
                    magnet[item + NUM * slideItem].imageLayouts[0].imageUrl &&
                    magnet[item + NUM * slideItem].imageLayouts[0].imageUrl.includes('vp-')
                      ? magnet[item + NUM * slideItem].imageLayouts[0].imageUrl
                      : `vp-${magnet[item + NUM * slideItem].imageLayouts[0].imageUrl
                          .replace(/\..*$/, '')
                          .replace(/^.*\_/, '')}`
                  "
                  :style="{ color: magnet[item + NUM * slideItem].bgColor }"
                ></i>
              </div>
              <div class="magnet-name" :class="`align_${magnetStyle.textAlign}`">
                <span :class="doubleFontEllipsis">{{
                  magnet[item + NUM * slideItem].displayName
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <div
      class="pagination"
      :style="{
        display: sliderNum.length > 1 ? 'block' : 'none'
      }"
    ></div>
    <!-- 前一个 -->
    <div
      class="control-btn left-btn"
      @click="handleLeft"
      :style="{
        display: sliderNum.length > 1 ? 'block' : 'none'
      }"
    >
      <span>&lt;</span>
    </div>
    <!-- 后一个 -->
    <div
      class="control-btn right-btn"
      @click="handleRight"
      :style="{
        display: sliderNum.length > 1 ? 'block' : 'none'
      }"
    >
      <span> &gt;</span>
    </div>
  </div>
</template>

<script>
  import swiper from '@/mixins/swiper';
  export default {
    name: 'CardDefault',
    mixins: [swiper],
    props: {
      contentWidth: {
        type: Number,
        default: 1400
      },
      magnetStyle: {
        type: Object
      },
      magnet: {
        type: Array
      },
      isImg: {
        type: Function
      },
      doSomething: {
        type: Function
      },
      swiperId: {
        type: String
      }
    },
    data() {
      return {
        NUM: 13
      };
    },
    computed: {
      sliderNum() {
        let n = Math.ceil(this.magnet.length / 13);
        return new Array(n).fill('1').map((v, i) => i);
      },
      doubleFontEllipsis() {
        return this.magnetStyle.propertyMap.wordWrap == 'double' ? 'font-ellipsis2' : '';
      }
    },
    mounted() {
      this.setSwiper(
        new Swiper(`#${this.swiperId}`, {
          mode: 'horizontal',
          pagination: `#${this.swiperId}>.pagination`,
          paginationClickable: true,
          createPagination: true,
          centeredSlides: true,
          offsetPxBefore: 100
          // offsetPxAfter: 100,
        })
      );

      this.initEllipsis2();
      this.verticalAlign('.magnet-name');
    },
    methods: {
      handleLeft() {
        this._swiper.swipePrev();
      },
      handleRight() {
        this._swiper.swipeNext();
      },
      isIE() {
        var ua = window.navigator.userAgent;

        if (ua.indexOf('MSIE ') >= 0) {
          return true;
        } else {
          return ua.indexOf('Trident/') >= 0;
        }
      },
      verticalAlign(ele, isFirst) {
        ele = $(this.$el).find(ele);
        setTimeout(function () {
          $.each($(ele), function (index, item) {
            if ($(item).hasClass('is-verticalAlign')) {
              return true;
            }
            var eleHeight = $(item).height();
            var childDomHeight = 0;
            $.each($(item).children(), function (childIndex, child) {
              childDomHeight += $(child).height();
              if (isFirst) {
                return false;
              }
            });

            var paddingVer = parseInt((eleHeight - childDomHeight) / 2);
            $(item).css({
              'padding-top': paddingVer + 'px',
              'padding-bottom': paddingVer + 'px',
              'box-sizing': 'border-box'
            });
            $(item).addClass('is-verticalAlign');
          });
        }, 0);
      },
      initEllipsis2() {
        if (this.isIE()) {
          var ele = $(this.$el).find('.font-ellipsis2');
          // 汉字
          var cnPattern = /[\u4E00-\u9FA5]/;
          setTimeout(function () {
            $.each($(ele), function (index, item) {
              var _fontSize = $(item).css('fontSize');
              var _width = $(item).width();
              var _len = Math.floor((_width * 2) / parseInt(_fontSize));
              var text = $(item)
                .text()
                .replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
              var textLen = 0;
              var curLen = 0;
              $.each(text, function (i, str) {
                if (cnPattern.test(str)) {
                  textLen += 1;
                } else {
                  textLen += 0.5;
                }
                if (_len < textLen) {
                  curLen = i - 1;
                  return false;
                }
              });

              if (_len < textLen) {
                var ellipsis2Text = $(item)
                  .text()
                  .substring(0, curLen - 2);
                $(item).text(ellipsis2Text + '...');
              }
            });
          }, 0);
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  // 轮播
  .swiper-container {
    height: 470px;
  }

  .swiper-container:hover {
    .control-btn {
      display: block;
    }
  }

  .pagination {
    position: absolute;
    bottom: 0;
    z-index: 20;
    // bottom: 10px;
    width: 100%;
    height: 30px;
    text-align: center;
  }

  /deep/.swiper-active-switch {
    width: 10px;
  }

  .control-btn {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: none;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    font-size: 22px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
  }

  .left-btn {
    left: 30px;
  }

  .right-btn {
    right: 30px;
  }
  // 大卡片
  .big-card-slide {
    overflow-x: auto;
    overflow-y: hidden;

    .big-card-bot {
      margin-top: 20px;
    }

    .box2 {
      float: left;
      width: 19%;
      height: 300px;
      margin-right: 20px;
    }

    .box2 .second-card:first-child {
      margin-bottom: 20px;
    }

    .box3 {
      float: left;
      height: 300px;
    }

    .item-card {
      position: relative;
      float: left;
      margin-right: 20px;
      cursor: pointer;

      .card-detail {
        text-align: center;

        .magnet-icon {
          display: inline-block;
          width: 42px;
          height: 42px;
          overflow: hidden;
          font-size: 42px;
          color: #fff;
          text-align: center;

          i {
            display: block;
            color: #fff;
          }
        }

        .magnet-name {
          height: 40px;
          margin: 0 10px;
          overflow: hidden;
          font-size: 16px;
          // line-height: 40px;
          line-height: 1.2;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .magnet-name.align_left,
        .magnet-name.align_right {
          position: absolute;
          right: 0;
          bottom: 10px;
          left: 0;
          margin-top: 0 !important;
        }

        .align_left {
          text-align: left;
        }

        .align_right {
          text-align: right;
        }
      }
    }

    .first-card {
      width: 19%;
      height: 300px;

      .card-detail {
        margin-top: 107px;
      }
    }

    .second-card {
      width: 217px;
      height: 140px;

      .card-detail {
        margin-top: 27px;
      }
    }

    .third-card {
      width: 138px;
      height: 140px;
      margin-top: 20px;

      .card-detail {
        margin-top: 27px;
      }
    }

    .forth-card {
      width: 138px;
      height: 110px;
      color: #333;
      background-color: rgba(255, 255, 255, 0.6);

      .card-detail {
        margin-top: 12px;
      }
    }
  }

  .clear_fix::after {
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
    content: '.';
    visibility: hidden;
  }

  .clear_fix {
    zoom: 1;
  }

  .font-ellipsis2 {
    position: relative;
    display: block;
    display: -webkit-box !important;
    overflow: hidden;
    line-height: 1.2 !important;
    text-overflow: inherit !important;
    word-break: break-all;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>
